<template>
  <flexbox-item class="apply-status" :span="3">
    <!-- 已審批 -->
    <div v-if="applyStatus === 2">
      <i class="icon icon-apply-success"></i>
      已审批
    </div>
    <!-- 已駁回 -->
    <div v-else-if="applyStatus === 3">
      <i class="icon icon-apply-error"></i>
      已驳回
    </div>
    <div v-else-if="applyStatus === 5">
      <i class="icon icon-apply-cancel"></i>
      已取消
    </div>
    <!-- 我的審批 -- 待審批 -->
    <div v-else-if="!routeName && applyStatus === 1">
      <i class="icon icon-apply-wait"></i>
      待审批
    </div>
    <!-- 我的申請 -- 審批中 -->
    <div v-else-if="routeName && applyStatus === 1">
      <i class="icon icon-apply-pending"></i>
      审批中
    </div>
    <!-- 我的審批 -- 待查阅 -->
    <div v-else-if="applyStatus === 6">
      <i class="icon icon-apply-waitCheck"></i>
      待查阅
    </div>
    <!-- 我的申請 -- 已查阅 -->
    <div v-else-if="applyStatus === 7">
      <i class="icon icon-apply-Checked"></i>
      已查阅
    </div>
    <!-- 我的審批 -- 已關閉 -->
    <div v-else-if="!routeName && applyStatus === 4">
      <i class="icon icon-apply-close"></i>
      已关闭
    </div>
  </flexbox-item>
</template>

<script>
  import { FlexboxItem } from 'vux';
  export default {
    name: 'ApplyStatus',
    data () {
      return {
        routeName: this.$route.name === 'ApplicationList'
      };
    },
    props: ['applyStatus'],  // 1：待審批  2：已審批  3：已駁回
    components: {
      FlexboxItem
    },
    mounted () {
    },
    methods: {
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
  .apply-status{
    position: relative;
    text-align: right;
    right: 15px;
    font-size: getRem(28);
    .icon{
      position: absolute;
      right: getRem(96);
      display: block;
      width: getRem(40);
      height: getRem(40);
    }
    .icon-apply-success{
      background: url(../../assets/images/icon-status-success.png) no-repeat center center;
      background-size: getRem(40) getRem(40);
    }
    .icon-apply-error{
      background: url(../../assets/images/icon-status-error.png) no-repeat center center;
      background-size: getRem(40) getRem(40);
    }
    .icon-apply-wait{
      background: url(../../assets/images/icon-status-wait.png) no-repeat center center;
      background-size: getRem(40) getRem(40);
    }
    .icon-apply-pending{
      background: url(../../assets/images/icon-status-pending.png) no-repeat center center;
      background-size: getRem(40) getRem(40);
    }
    .icon-apply-waitCheck{
      background: url(../../assets/images/consulting_icon@2x.png) no-repeat center center;
      background-size: getRem(40) getRem(40);
    }
    .icon-apply-Checked{
      background: url(../../assets/images/consulted_icon@2x.png) no-repeat center center;
      background-size: getRem(40) getRem(40);
    }
    .icon-apply-close{
      background: url(../../assets/images/icon-status-closed.png) no-repeat center center;
      background-size: getRem(40) getRem(40);
    }
    .icon-apply-cancel{
      background: url(../../assets/images/icon-status-cancel.png) no-repeat center center;
      background-size: getRem(40) getRem(40);
    }
  }
</style>
